<template>
  <!-- <persons/> 人物主页组件-->
  <!--?Content=Go%20home%20after%20a%20day%27s%20work&ItemId=0266411437a74711bbbdc2aeaaf00c8a&TargetMember=limeimei
Request Method: POST -->
  <div class="continer">
    <div class="dynamic_titles">
      <div class="dynamic_dynamic_s">
        <div
          class="friend_dynamics"
          :class="is_selected_dyanamic ? 'selected_dyanamic' : ''"
          @click="friend_dynamics()">
          <div>我的动态</div>
        </div>
        <div
          class="friend_dynamics"
          :class="is_selected_dyanamic ? '' : 'selected_dyanamic'"
          @click="online_line()">
          <div><img src="../assets/editors.png" /></div>
        </div>
      </div>
    </div>
    <!-- 引入在线组件 -->
    <onlines v-if="is_selected_dyanamic == false" />
    <!--循环   -->
    <div class="dynamic_sections" v-if="is_selected_dyanamic" >
      <div class="dynamic_content"   v-for="(item,index) in userId" :key="index">
        <div class="person_nav">
          <!--用户的头像 -->
          <div class="persons_imgs" :style="{backgroundImage:'url(' + item.MemberHeadImg + ')', backgroundRepeat:'no-repeat',}" >
            <img src="../assets/personal/person_memer.png" />
          </div>
          <!-- 用户的昵称 时间 -->
          <div>
            <div> 
              <h4>{{item.MemberName || 'maliya' }}</h4>
              <p>{{item.AddTime || '2小时前'}}</p>
            </div>
          </div>
        </div>
        <!-- 动态的内容 -->
        <div class="Dynamic_contents">
          <div class="Dynamic_Dynamic">
            <div class="Dynamic_pictures" v-for="(i,cindex) in item.Imgs" :key="cindex">
              <div>
                <img :src="i.DisplayUrl" />
              </div>
              <!--  -->
              <div>
                <img :src="i.PreivewUrl" />
              </div>
            </div>
            <!--  -->
            <div class="publish_content">{{item.Content}}</div>
            <!-- 评论区 -->
            <div class="review_review">
              <div class="comment_comment">
                <!--点赞  -->
                <div>
                  <img src="../assets/personal/dynamic_humbs-up.png" />
                  <span>{{item.LikeCount}}</span>
                </div>
                <!-- 评论 -->
                <div  @click="comment(item.Id)">
                  <img src="../assets/personal/dynamic_commentunable.png" />
                  <span>{{item.PingLunCount}}</span>
                </div>
                <!-- 添加删除动态功能 -->
                <!-- <div>
                  <img src="../assets/personal/complaint.png" />
                </div> -->
              </div>

              <div><img src="../assets/personal/zytrans.png" /></div>
            </div>
            <!-- 评论列表comment 如果不存在  v-if="!DynamicList" -->
            <div class="comment_list" v-if="(item.show)">
              <div v-for="(item,index) in obj" :key="index">
                <div class="header_imgs">
                  <!-- MemberHeadImg -->
                  <!-- <img src="../assets/personal/holyia.png" /> -->
                  <img :src="item.MemberHeadImg"/>
                </div>
                <!-- 评论没有东西 res出来的数据是空的 -->
                <div v-for="(item,index) in list" :key="index">
                  <h4 v-if="(item.show)">>{{item.Name}}holyia</h4>
                  <div class="issue_opinion">还不错啊{{item.show}}</div>
                  <p>本周一08:28</p>
                </div>
                </div>
            </div>
            <!--  如果存在 -->
                <!-- <div class="comment_list" >
              <div class="header_imgs">
                <img src="../assets/personal/holyia.png" />
              </div>
              <div>
                <h4>holyia</h4>
                <div class="issue_opinion">还不错啊</div>
                <p>本周一08:28</p>
              </div>
            </div> -->

          </div>
        </div>
      </div>
    </div>
    <!-- 循环 -->

    <div class="dynamic_sections" v-if="is_selected_dyanamic">
      <div class="dynamic_content">
        <div class="person_nav">
          <!--用户的头像 -->
          <div class="persons_imgs">
            <img src="../assets/personal/person_memer.png" />
          </div>
          <!-- 用户的昵称 时间-->
          <div>
            <div>
              <h4>maliya</h4>
              <p>2小时前</p>
            </div>
          </div>
        </div>
        <!-- 动态的内容 -->
        <div class="Dynamic_contents">
          <!-- dynamic.png -->
          <div class="Dynamic_Dynamic">
            <div class="Dynamic_pictures">
              <div>
                <img src="../assets/personal/dynamic.png" />
              </div>
              <!--  -->
              <div>
                <img src="../assets/personal/dynamic.png" />
              </div>
            </div>
            <!--  -->
            <div class="publish_content">最近还好吗?</div>
            <!-- 评论区 -->
            <div class="review_review">
              <div class="comment_comment">
                <!--点赞  -->
                <div>
                  <img src="../assets/personal/dynamic_humbs-up.png" />
                  <span>6</span>
                </div>
                <!-- 评论 -->
                <div>
                  <img src="../assets/personal/dynamic_commentunable.png" />
                  <span>6</span>
                </div>
                <div>
                  <img src="../assets/personal/complaint.png" />
                </div>
              </div>
              <!-- 翻译 -->
              <div @click="translate(item.Id)"><img src="../assets/personal/zytrans.png" /></div>
            </div>
            <!-- 评论列表 -->
            <div class="comment_list">
              <div class="header_imgs">
                <img src="../assets/personal/holyia.png" />
              </div>
              <div>
                <h4>holyia</h4>
                <div class="issue_opinion">还不错啊</div>
                <p>本周一08:28</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dynamic_sections" v-if="is_selected_dyanamic">
      <div class="dynamic_content">
        <div class="person_nav">
          <!--用户的头像 -->
          <div class="persons_imgs">
            <img src="../assets/personal/person_memer.png" />
          </div>
          <!-- 用户的昵称 时间-->
          <div>
            <div>
              <h4>maliya</h4>
              <p>2小时前</p>
            </div>
          </div>
        </div>
        <!-- 动态的内容 -->
        <div class="Dynamic_contents">
          <!-- dynamic.png -->
          <div class="Dynamic_Dynamic">
            <div class="Dynamic_pictures">
              <div>
                <img src="../assets/personal/dynamic.png" />
              </div>
              <!--  -->
              <div>
                <img src="../assets/personal/dynamic.png" />
              </div>
            </div>
            <!--  -->
            <div class="publish_content">最近还好吗?</div>
            <!-- 评论区 -->
            <div class="review_review">
              <div class="comment_comment">
                <!--点赞  -->
                <div>
                  <img src="../assets/personal/dynamic_humbs-up.png" />
                  <span>6</span>
                </div>
                <!-- 评论 -->
                <div>
                  <img src="../assets/personal/dynamic_commentunable.png" />
                  <span>6</span>
                </div>

                <div>
                  <img src="../assets/personal/complaint.png" />
                </div>
              </div>

              <!--  -->
              <div><img src="../assets/personal/zytrans.png" /></div>
            </div>
            <!-- 评论列表 -->
            <div class="comment_list">
              <div class="header_imgs">
                <img src="../assets/personal/holyia.png" />
              </div>
              <div>
                <h4>holyia</h4>
                <div class="issue_opinion">还不错啊</div>
                <p>本周一08:28</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 
<script>
import{getCommentList,getRedList,getDeleteDynamic,getsubTranslate,getInsertRedHeart,getCancelRedHeart}from"../utils/http.js";
export default {
  name: "Mydynamic",
 data: () => ({
    is_selected_dyanamic: true,
    obj:'',
    list:'',
    show:true,
  }),
  created() {},
  mounted() {
    this.userId.forEach(
      item =>{
        //评论内容接口
        getCommentList({
          ItemId:item.Id,
          Page:1,
        }).then((res) =>{
          this.list = res.Obj
          console.log(this.obj)
          console.log(res ,'评论266666666')
        });
      }
    );
     this.userId.forEach(
      item =>{
        //
        getRedList({
          ItemId:item.Id,
          Page:1,
        }).then((res) =>{
          this.obj = res.Obj
          console.log(this.obj)
          console.log(res ,'评论') 
        });
      }
    );
    //删除
    this.userId.forEach(
      item =>{
        getDeleteDynamic({
          ItemId:item.Id,
        }).then((res) =>{
          this.obj = res.Obj
          console.log(this.obj)
          console.log(res ,'28999999999删除') 
        });
      }
    );
    //翻译
     this.userId.forEach(
      item =>{
        getsubTranslate({
          ItemId:item.Id,
          Content:item.Content,
          TargetMember:item.TimeStamp,
        }).then((res) =>{
          this.obj = res.Obj
          console.log(this.obj)
          console.log(res ,'翻译30777777777') 
        });
      }
    );
    //点赞
     this.userId.forEach(
      item =>{
        getInsertRedHeart({
          ItemId:item.Id,
          Content:item.Content,
          TargetMember:item.MemberName,
        }).then((res) =>{
          this.obj = res.Obj
          console.log(this.obj)
          console.log(res ,'点赞30777777777') 
        });
      }
    );
    //取消点赞
     this.userId.forEach(
      item =>{
        getCancelRedHeart({
          ItemId:item.Id,
          Tmember:item.MemberName,
        }).then((res) =>{
          this.obj = res.Obj
          console.log(this.obj)
          console.log(res ,'取消点赞30777777777') 
        });
      }
    );
  },
  methods: {
    //弹窗事件
    comment(item){
    console.log(item,'item弹窗');
     item.show = !item.show
    },
    //翻译
    // page(){
    //   var param = {
    //     :'',
    //     ItemId:'',
    //     TargetMember:'',
    //   }
    //   getsubTranslate(param).then((res) =>{
    //     console.log(res);
    //   })
    // },
 
    // getpage(){
    //   var parpm = {
    //     ItemId='',
    //   }
    //   //删除评论
    //   getDeleteDynamic(param).then((res) =>{
    //     console.log(res,'291');
    //   })
    // },
    friend_dynamics() {
      // this.is_selected_dyanamic = true;
      //   this.$emit("friend_dy");
    },
    online_line() {
      // this.is_selected_dyanamic = false;
        this.$emit("editorContent");
    },
  },
  computed:{
    userId(){
      // 这里是获取vuex中存取的值， 。state。模块名称。是固定用法
      // user_id就是在vuex的js文件中存储值的变量
       return this.$store.state.user.user_id
      console.log(this.$store.state.user.user_id,'vuex339');
    }
  },
};
</script>
<style >
html {
  background-color: #eff2fc;
}
</style>
<style scoped>
.continer {
  width: 73%;
}
.dynamic_sections {
  background-color: #ffffff;
}
.dynamic_content {
  padding-top: 1rem;
  width: 95%;
  margin: 0 auto;
}
.dynamic_titles {
  width: 100%;
  background-color: #ffffff;
}
.dynamic_dynamic_s {
  display: flex;
  width: 93%;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.person_nav {
  display: flex;
  align-items: center;
}
.person_nav h4 {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0e0e0e;
}
.person_nav p {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 0.1rem;
}
.persons_imgs {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  margin-right: 15px;
  background-size:cover;
  border:1px solid #f7f4cc;
}
.persons_imgs img {
  position: absolute;
  left: 1.9rem;
  bottom: 0;
}
.Dynamic_Dynamic {
  width: 87%;
  margin: 0 auto;
}
.Dynamic_pictures {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  justify-content: space-around;
}
.Dynamic_pictures img{
  width: 360px;
  height: 360px;
  border-radius: 10px;
}
.publish_content {
  width: 98%;
  margin: 10px auto;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.review_review {
  width: 95%;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment_comment {
  display: flex;
  align-items: center;
  width: 20%;
  justify-content: space-between;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.comment_list {
  width: 98%;
  margin: 12px auto;
  display: flex;
}
.comment_list h4 {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4064e3;
}
.header_imgs {
  margin-right: 1rem;
}
.issue_opinion {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 5px;
  margin-top: 5px;
}
.comment_list p {
  font-size: 12px;
  font-family: PingFa;
  font-weight: 500;
  color: #999999;
  margin-top: 0.1rem;
}
.friend_dynamics {
  padding-bottom: 10px;
  padding-top: 10px;
  color: #999999;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  border-bottom: 2px solid #ffffff;
}
.selected_dyanamic {
  color: #4064e3;
  border-bottom: 2px solid #4064e3;
}
</style>